<template>
  <div>
    <components
      v-for="(item, i) in publishComponentData"
      :key="item.id"
      :is="item.component"
      :style="{ ...item.style, 'z-index': i + 1 }"
      :propValue="item.propValue"
      :class="item.isCurrent ? 'isCur' : ''"
      @click.native="handleClick(item.events)"
      @dblclick.native="handleDblclick(item.events)"
      @change.native="handleChange(item.events)"
    ></components>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 页面Id
      pageId: this.$route.params.id,
      publishComponentData: [],
    };
  },
  computed: {},
  created() {
    // 获取组件数据
    this.getComponentData();
  },
  methods: {
    async getComponentData() {
      const { data: res } = await axios.get(`/publishPage/${this.pageId}`);
      if (res.status !== 0) {
        return this.$router.push("/404");
      }
      this.publishComponentData = JSON.parse(res.data.componentData);
    },
    handleClick(events) {
      if (events.click == undefined) return;
      eval(events.click);
    },
    handleDblclick(events) {
      if (events.dblclick == undefined) return;
      eval(events.dblclick);
    },
    handleChange(events) {
      if (events.change == undefined) return;
      eval(events.change);
    },
  },
};
</script>

<style lang="less" scoped></style>
